<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center>
      <v-flex md12 d-flex justify-start>
        <v-flex md1>
          <v-btn round class="subTitle" color="light-blue" dark @click="onAdd">
            <span>上传图片</span>
            <v-icon>add</v-icon>
          </v-btn>
        </v-flex>
      </v-flex>

      <!-- <v-flex md12 text-xs-left>
        <v-btn round class="subTitle" color="primary" @click="onBatchAudit">
          <span>批量审核</span>
        </v-btn>
      </v-flex>-->

      <!-- table -->
      <v-flex md12>
        <ul class="image-list">
          <li  class="elevation-1" v-for="(item,i) in tableData">
            <img :src="item.img" alt />
            <div>图片链接: {{ item.url }}  类型: {{ item.type === 1 ? '轮播' : '侧边' }}</div>
            <div class="del">
              <v-icon title="删除图片" @click="onDelete(item)" color="red">delete_forever</v-icon>
            </div>
          </li>
        </ul>
      </v-flex>
    </v-layout>

    <v-dialog v-model="dialog" max-width="800px">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>{{ dialogTitle }}</v-card-title>
        <v-card-text>
          <v-layout row wrap justify-center>
            <v-flex md8 class="droppable" id="dropPanel" @drop="onDrop" @dragover="onDragOver">
              <div class="fill-height fill-width">
                <img class="preview-image" :src="imagePreview" alt v-if="imagePreview !== ''" />
              </div>

              <ui-icon icon="cloud-upload fa-lg" v-if="imagePreview === ''" class="cloud-icon"></ui-icon>
              <span v-if="imagePreview === ''" class="upload-tip title-color">选择图片</span>

              <input
                type="file"
                accept="image/*"
                name="imageInput"
                class="file-input"
                @change="onFileInputChange"
              />
            </v-flex>
            <v-flex md8>
              <v-text-field
                label="图片链接URL"
                v-model="imageUrl"
                hint="请填写标准超链接, 格式为https://www.xxx.com"
              ></v-text-field>
            </v-flex>
            <v-flex md8>
              <v-radio-group v-model="type" :column="false">
              <v-radio
                :label="item.text"
                :value="item.value"
                color="primary"
                v-for="(item, i) in types"
                :key="i"
              ></v-radio>
              </v-radio-group>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onDialogConfirm">确认</v-btn>
          <v-btn color="grey darken-1" flat @click="dialog = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="title">{{ modalTitle }}</v-card-title>
        <v-card-text class="title">{{ modalContent }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onModalConfirm">确定</v-btn>
          <v-btn color="grey darken-1" flat @click="modal = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Todo, Admin, User, System, FileHandler, Content } from "@/api";
import { TopupStatusKV, PageOptions } from "@/utils/constants";
import { KV, Pagination } from "@/utils/type";
import { forEach } from "lodash";
import { ReqUserInfo, ReqBlacklistInfo, RespFileVo, ReqSlideshow, Slideshow } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
declare const $Vue: Vue;

@Component
export default class OrderList extends Vue {
  private pageOptions: any = [];

  private type: any = 1;

  private tableData: any = [
  ];
  // 表格选中项目
  private types: Array<any> = [{
    text: '轮播图',
    value: 1,
  }, {
    text: '侧边',
    value: 2,
  }];

  private loading: boolean = false;

  private dialog: boolean = false;
  private dialogTitle: string = "";
  private dialogType: number = 1;
  private dialogItem: any = {};

  private modal: boolean = false;
  private modalType: number = 1;
  private modalTitle: string = "注意!";
  private modalItem: any = {};
  private modalContent: string = "确认删除吗?";
  private isQuery: boolean = false;
  private file: any = null;
  private imagePreview: string = '';
  private imageUrl: string = '';

  private pagination: Pagination = {
    pageCount: 1,
    page: 1,
    limit: 10,
    offset: 0
  };

  protected mounted() {
    this.getSlideshowList();
    this.initialize();
  }

  private getTime(date: string) {
    return getTime(date);
  }

  private initialize() {
    this.pageOptions = PageOptions;
  }
  private onUpload() {
    this.dialog = true;
  }

  private onDialogConfirm() {
    this.uploadFile();
  }

  private onDrop(ev: any) {
    ev.preventDefault();
    const file = ev.dataTransfer.files[0];
    if (!file.name.match(/\.jp(e)g|png/g)) {
      return alert("请拖入图片文件");
    }
    this.handleImageFile(file);
  }

  private onDragOver(ev: DragEvent) {
    ev.preventDefault();
    return false;
  }

  private onFileInputChange(ev: any) {
    let file = ev.target.files[0];
    this.handleImageFile(file);
  }

  private handleImageFile(file: File) {
    const reader = new FileReader();
    this.file = file;
    reader.onload = (ev: any) => {
      this.imagePreview = ev.target.result;
    };
    reader.readAsDataURL(file);
  }

  /**
   * 图片上传完成
   */
  private handleImageUploaded(data: RespFileVo) {
    let fileUrl = data.fileUrl;
    this.saveSlideShowImage(fileUrl, this.imageUrl);
  }

  private onAdd() {
    this.dialog = true;
  }

  private onDelete(item: any) {
    this.modal = true;
    this.modalItem = item;
  }


  private onModalConfirm() {
    this.deleteImage();
  }

  /**
   * 获取任务列表
   */
  private async getSlideshowList() {
    let params: ReqSlideshow = {
      offset: 0,
      limit: 1000,
    };

    const { data } = await Content.getSlideshowList.r(params);
    console.log("getSlideshowList", data);
    if (data.result === 0) {
      if (data.data) {
        let $data = data.data;
        this.tableData = $data.dataList;
        // this.pagination.pageCount = $data.totalCount
        //   ? Math.ceil($data.totalCount / this.pagination.limit)
        //   : 1;
      }
    } else {
      this.tableData = [];
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 保存轮播图
   */
  private async saveSlideShowImage(img: string,url: string) {
    let params: Slideshow = {
      url, img, type: this.type,
    };

    const { data } = await Content.saveSlideShowImage.r(params);
    console.log("saveSlideShowImage", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    this.dialog = false;
    this.getSlideshowList();
    this.file = null;
    this.imagePreview = '';
    this.imageUrl = '';
    if (data.result === 0) {

    } else {

    }
  }



  /**
   * 删除买家号
   */
  private async deleteImage() {
    const params: any = {
      sId: this.modalItem.sId
    };
    const { data } = await Content.deleteSlideShowImage.r(params);
    console.log("deleteSlideShowImage", data);
          $Vue.$emit("snackbar", {
        message: data.message
      });
      this.modal = false;
    if (data.result === 0) {
      this.getSlideshowList();
    }
  }
  private async uploadFile() {
    const params: FormData = new FormData();
    params.append('file', this.file);
    const config = {
      headers: {
        "Content-Type": "multipart/form-data"
      },
    };
    const { data } = await FileHandler.uploadFile.r(params, config);
    console.log("uploadFile", data);
    if (data.result === 0) {
      // 图片上传完成后的处理
      this.handleImageUploaded(data.data[0]);
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>

<style lang="less" scoped>
.image-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
    width: 100%;
  li {
    width: 49%;
    flex-basis: 49%;
    height: 14rem;
    border-radius: 12px;
    position: relative;
    .del {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    img {
      max-height: 80%;
      max-width: 100%;
    }
  }
}

.preview-image {
  max-width: 100%;
  max-height: 80%;
}
</style>


